<template><div class="container scroller">
	<div class="main">
		<Debug v-show="isShowDebug">{{debugInfo}}</Debug>
		<WHeader></WHeader>
		<WBody>
			<div v-for="item in chatLog">
				<ChatTime v-if="item.type==='bubbleTime'">{{item.content}}</ChatTime>
				<ChatWarp :type="item.type" :avatar="item.avatar" :direction="item.direction" :content="item.content"></ChatWarp> 
			</div>
		</WBody>
		<WFooter v-on:sendMsg="sendMsg"></WFooter> 
	</div>
	<input type="text" class="hidden-input">
</div></template>
<script>
import WHeader from '../components/container/Window-Header.vue';
import WBody from '../components/container/Window-Body.vue';
import WFooter from '../components/container/Window-Footer.vue';
import ChatWarp from '../components/Bubble/Bubble.vue';
import ChatTime from '../components/Bubble/BubbleTime.vue';
import Debug from '../components/DebugWindow.vue';

const toEnd = function () {
	let obj = window.document.getElementsByClassName('body')[0]; 
	setTimeout(function () {
		obj.scrollTop = obj.offsetHeight + obj.scrollHeight;
	},100); 
}

export default {
	data() {
		return {
			isShowDebug : false,
			isiOS : false,
			debugInfo : '',
			chatLog : [],
			master : {}
		}
	},

	mounted () {
		let u = navigator.userAgent, app = navigator.appVersion;
		this.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端  
		let obj = window.document.getElementsByClassName('body')[0]; 
		this.$http.get('https://api.tiesec.org/getMaster').then(response => {  
		    this.master = response.body;
		}, response => {
		  // error callback
		});  

		let footer = window.document.querySelector('.footer');
		let myInput = document.getElementsByClassName('input')[0];

		setInterval(function () {
			if ( window.innerHeight == document.body.offsetHeight ) {
				if ( footer.style.bottom === "30px" ) {
					footer.style.bottom = '0px';
				}
			}
			if ( window.innerHeight == 333 ) { 
				footer.style.bottom = '30px'; 
			}
			if ( window.innerHeight == 291 ) { 
				footer.style.bottom = '-10px'; 
			}
		},100);

		obj.addEventListener('touchstart', ()=> { 
			// if ( myInput.getAttribute('contenteditable') == 'true' ) {
			//     myInput.setAttribute('contenteditable', 'false'); 
			// }
			if ( this.isiOS ) { 
				// this.showDebug('document.body.offsetHeight : ' + document.body.offsetHeight + "<br/>" + 
				// 		'document.documentElement.clientHeight : ' + document.documentElement.clientHeight+ "<br/>" +
				// 		'window.innerHeight : ' + window.innerHeight + "<br/>"
				// 	);
			}
		});

		myInput.addEventListener('touchstart', function () {
			//this.setAttribute('contenteditable', 'false');
			//footer.style.bottom = '30px';
			//let hiddenInput = document.querySelector('.hidden-input');
			//hiddenInput.focus();
			//obj.style.height = (obj.offsetHeight - 50) + 'px';
			// if ( myInput.getAttribute('contenteditable') == 'false' ) { 
			//     myInput.setAttribute('contenteditable', 'true'); 
			//     console.log(isiOS);
			//     if ( isiOS ) { 
			//         window.setTimeout(function () {
			//         	 window.scrollTo(0,document.body.scrollHeight);
			//         	  myInput.scrollIntoView();
			//         }, 500); 
			//     }
			// }
		});
	},

	methods : {  
		sendMsg (msg) { 
			// if ( this.isiOS ) { 
			// 	let footer = window.document.querySelector('.footer');
			// 	footer.style.bottom = '0px';
			// }

			this.chatLog.push({
				direction : 'right',
				type : 'text',
				content : msg,
				avatar : this.master.avatar
			}); 

			this.$http.post('https://api.tiesec.org/chat',{content:msg}).then(response => {  
			  let data = response.body; 
			  console.log(data);
			  data.forEach((item)=>{ 
			  	this.chatLog.push(item);
			  });
			  toEnd();
			}, response => {
			  // error callback
			});
			
		},

		showDebug (info) {
			this.debugInfo = info;
			this.isShowDebug = true;
			setTimeout(()=>{
				this.isShowDebug = false;
			},2000);
		}
	},

	components : {
		WHeader,
		WBody,
		WFooter,
		ChatWarp,
		ChatTime,
		Debug
	}
}
</script>

<style scoped>
	.hidden-input {
		position: fixed;
		bottom: -50px;
		left: -10000px;
	}
</style>